import {
  tagOptions,
  fontWeightOptions,
  fontFamilyOptions,
  textAlignOptions,
  colorOptions,
  typeOptions,
  contentPositionOptions,
  directionOptions,
  borderStyleOptions,
  controlsPositionOptions,
  textTypeOptions,
  textSizeOptions,
  textTagOptions,
  justifyOptions,
  alignOptions,
} from '@/schema/config/options'

const useComponentConfig = () => {
  const componentPropsMap = {
    title: [
      {
        field: 'value',
        label: '标题',
        component: 'ElInput',
        props: {},
      },
      {
        field: 'tag',
        label: '样式',
        component: 'ElSegmented',
        props: {
          options: tagOptions,
        },
      },
      {
        field: 'fontWeight',
        label: '字重',
        component: 'ElSegmented',
        props: {
          options: fontWeightOptions,
        },
      },
      {
        field: 'fontFamily',
        label: '字体',
        component: 'ElSegmented',
        props: {
          options: fontFamilyOptions,
        },
      },
      {
        field: 'lineHeight',
        label: '行高',
        component: 'ElInputNumber',
        props: {
          min: 1,
          step: 0.1,
          precision: 1,
        },
      },
      {
        field: 'textAlign',
        label: '水平位置',
        component: 'ElSegmented',
        props: {
          options: textAlignOptions,
        },
      },
      {
        field: 'color',
        label: '颜色',
        component: 'ElColorPicker',
        props: {
          teleported: false,
          showAlpha: true,
          predefine: colorOptions,
        },
      },
    ],
    input: [
      {
        field: 'type',
        label: '输入框类型',
        component: 'ElSegmented',
        props: {
          options: typeOptions,
        },
      },
      {
        field: 'placeholder',
        label: '占位符',
        component: 'ElInput',
        props: {},
      },
      {
        field: 'clearable',
        label: '可清空',
        component: 'ElSwitch',
        props: {
          activeText: '是',
          inactiveText: '否',
        },
      },
      {
        field: 'maxlength',
        label: '最大长度',
        component: 'ElInputNumber',
        props: {
          min: 0,
        },
      },
      {
        field: 'showWordLimit',
        label: '显示字数',
        component: 'ElSwitch',
        props: {
          activeText: '是',
          inactiveText: '否',
        },
      },
      {
        field: 'showPassword',
        label: '显示密码',
        component: 'ElSwitch',
        props: {
          activeText: '是',
          inactiveText: '否',
        },
      },
      {
        field: 'autosize',
        label: '高度自适应',
        component: 'ElSwitch',
        props: {
          activeText: '是',
          inactiveText: '否',
        },
      },
    ],
    divider: [
      {
        field: 'value',
        label: '自定义分割线内容',
        component: 'ElInput',
      },
      {
        field: 'contentPosition',
        label: '内容位置',
        component: 'ElSegmented',
        props: {
          options: contentPositionOptions,
        },
      },
      {
        field: 'direction',
        label: '方向',
        component: 'ElSegmented',
        props: {
          options: directionOptions,
        },
      },
      {
        field: 'borderStyle',
        label: '样式',
        component: 'ElSegmented',
        props: {
          options: borderStyleOptions,
        },
      },
    ],
    inputNumber: [
      {
        field: 'min',
        label: '最小值',
        component: 'ElInputNumber',
        props: {},
      },
      {
        field: 'max',
        label: '最大值',
        component: 'ElInputNumber',
        props: {},
      },
      {
        field: 'precision',
        label: '数值精度',
        component: 'ElInputNumber',
        props: {
          min: 0,
          max: 4,
        },
      },
      {
        field: 'placeholder',
        label: '占位符',
        component: 'ElInput',
        props: {},
      },
      {
        field: 'controls',
        label: '显示控制按钮',
        component: 'ElSwitch',
        props: {
          activeText: '是',
          inactiveText: '否',
        },
      },
      {
        field: 'controlsPosition',
        label: '控制按钮位置',
        component: 'ElSegmented',
        props: {
          options: controlsPositionOptions,
        },
      },
    ],
    select: [
      {
        field: 'placeholder',
        label: '占位符',
        component: 'ElInput',
        props: {},
      },
      {
        field: 'clearable',
        label: '可清除',
        component: 'ElSwitch',
        props: {},
      },
      {
        field: 'multiple',
        label: '多选',
        component: 'ElSwitch',
        props: {},
      },
      {
        field: 'filterable',
        label: '可搜索',
        component: 'ElSwitch',
        props: {},
      },
    ],
    radio: [],
    radioButton: [
      {
        field: 'text-color',
        label: '按钮文本颜色',
        component: 'ElColorPicker',
        props: {},
      },
      {
        field: 'fill',
        label: '按钮填充颜色',
        component: 'ElColorPicker',
        props: {},
      },
    ],
    checkbox: [],
    switch: [
      {
        field: 'inline-prompt',
        label: '文本内显示',
        component: 'ElSwitch',
        props: {},
      },
      {
        field: 'active-text',
        label: '开启文字',
        component: 'ElInput',
        props: {},
      },
      {
        field: 'inactive-text',
        label: '关闭文字',
        component: 'ElInput',
        props: {},
      },
      {
        field: 'active-value',
        label: '开启值',
        component: 'ElInput',
        props: {},
      },
      {
        field: 'inactive-value',
        label: '关闭值',
        component: 'ElInput',
        props: {},
      },
    ],
    text: [
      {
        field: 'value',
        label: '内容',
        component: 'ElInput',
        props: {
          type: 'textarea',
          autosize: true,
        },
      },
      {
        field: 'type',
        label: '类型',
        component: 'ElSegmented',
        props: {
          options: textTypeOptions,
        },
      },
      {
        field: 'size',
        label: '大小',
        component: 'ElSegmented',
        props: {
          options: textSizeOptions,
        },
      },
      {
        field: 'tag',
        label: '标签',
        component: 'ElSegmented',
        props: {
          options: textTagOptions,
        },
      },
      {
        field: 'lineClamp',
        label: '最大行数',
        component: 'ElInputNumber',
        props: {
          min: 1,
          step: 1,
        },
      },
    ],
  }
  const colPropsList = [
    {
      field: 'span',
      label: '占用列数',
      component: 'ElInputNumber',
      props: {
        min: 0,
        max: 24,
        precision: 0,
      },
    },
    {
      field: 'offset',
      label: '左侧偏移',
      component: 'ElInputNumber',
      props: {
        min: 0,
        max: 24,
        precision: 0,
      },
    },
    {
      field: 'push',
      label: '右移',
      component: 'ElInputNumber',
      props: {
        min: 0,
        max: 24,
        precision: 0,
      },
    },
    {
      field: 'pull',
      label: '左移',
      component: 'ElInputNumber',
      props: {
        min: 0,
        max: 24,
        precision: 0,
      },
    },
  ]
  const rowPropsList = [
    {
      field: 'gutter',
      label: '栅栏间隔',
      component: 'ElInputNumber',
      props: {
        min: 0,
        max: 24,
        precision: 0,
      },
    },
    {
      field: 'justify',
      label: '水平排列',
      component: 'ElSegmented',
      props: {
        options: justifyOptions,
      },
    },
    {
      field: 'align',
      label: '垂直排列',
      component: 'ElSegmented',
      props: {
        options: alignOptions,
      },
    },
  ]
  return {
    componentPropsMap,
    colPropsList,
    rowPropsList,
  }
}

export default useComponentConfig
